import React from 'react'
import { Button } from 'antd';
import { Layout, Menu } from 'antd';
import {NavLink} from "react-router-dom"
import {useState} from "react"
import RouterView from '../router/routerView'
import routerList from '../router/routerList'
import {
    AppstoreOutlined,
    ContainerOutlined,
    DesktopOutlined,
    MailOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
} from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = [
    getItem(<NavLink to="/home/movie"> 路由1</NavLink>, '1', <PieChartOutlined />),
    getItem('Option 2', '2', <DesktopOutlined />),
    getItem('Navigation One', 'sub1', <MailOutlined />, [
        getItem('Option 5', '5'),
        getItem('Option 6', '6'),
        getItem('Option 7', '7'),
        getItem('Option 8', '8'),
    ]),
    getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
        getItem('Option 9', '9'),
        getItem('Option 10', '10'),
        getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
    ]),
];
function App() {
    const [collapsed, setCollapsed] = useState('false');
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
      };
    return (
        <div>
            <Layout>
                <Header>Header</Header>
                <Layout>
                    <Sider>
                        <div
                            style={{
                                width: 256,
                            }}
                        >
                           
                            <Menu
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                mode="inline"
                                theme="dark"
                                collapsed={collapsed}
                                items={items}
                            />
                        </div>
                    </Sider>
                    <Content>
                             <RouterView RouterList={routerList}/>
                    </Content>
                </Layout>
                <Footer>Footer</Footer>
            </Layout>
        </div>
    )
}

export default App